<!--
 * @Author       : Harry
 * @Date         : 2021-04-26 14:43:44
 * @LastEditors  : Harry
 * @LastEditTime : 2021-05-27 10:25:49
 * @FilePath     : \cardpack\src\components\content\user\usercenter\UserCenter.vue
 * @Description  : Input
-->
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/userhome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>欢迎页面</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <!-- 走马灯 -->
      <div class="block">
        <el-carousel :interval="2500" type="card" height="348px" autoplay loop>
          <el-carousel-item v-for="(img, index) in imgUrls" :key="index">
            <div class="demo-image">
              <el-image style="width: 100%" :src="img" :fit="fit"></el-image>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 水平线 -->
      <el-divider content-position="left">卡 包 管 理</el-divider>

      <!-- 简介布局 -->
      <div>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <img src="~assets/img/welcome/n1.png" alt="" />
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <h3>发现实用有趣的开源项目</h3>
              <ul>
                <li>汇聚优秀本土开源作者</li>
                <li>各种类型凯源项目应有尽有</li>
                <li>多维指数辅助便是凯源成熟度</li>
              </ul>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <h3>发现实用有趣的开源项目</h3>
              <ul>
                <li>汇聚优秀本土开源作者</li>
                <li>各种类型凯源项目应有尽有</li>
                <li>多维指数辅助便是凯源成熟度</li>
              </ul>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <img src="~assets/img/welcome/n1.png" alt="" />
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <img src="~assets/img/welcome/n3.png" alt="" />
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <h3>发现实用有趣的开源项目</h3>
              <ul>
                <li>汇聚优秀本土开源作者</li>
                <li>各种类型凯源项目应有尽有</li>
                <li>多维指数辅助便是凯源成熟度</li>
              </ul>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fit: "fill",
      imgUrls: [
        "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2174987593,2662472569&fm=26&gp=0.jpg",
        "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2518075838,729059185&fm=26&gp=0.jpg",
        "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1776237116,3686959977&fm=26&gp=0.jpg",
        "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2093652623,3404923431&fm=26&gp=0.jpg",
        "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2853060732,67678625&fm=26&gp=0.jpg",
        "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=214032392,3155184569&fm=26&gp=0.jpg",
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.box-card {
  margin-top: 20px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.el-row {
  margin-bottom: 20px;
}

。el-row:last-child {
  margin-bottom: 0;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.grid-content img {
  width: 70%;
  position: relative;
  top: -90px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

ul,
h3 {
  position: relative;
  top: 50px;
  left: 70px;
}

ul > li {
  list-style: none;
  position: relative;
  left: -30px;
  margin-top: 10px;
}

ul,
li,
h3 {
  font-size: 20px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
</style>
